import React, { useState } from "react"
import { Link } from "umi"
import { useLocation, useHistory } from "react-router"
import { Button, Input, message, Modal, Checkbox } from "antd"
import { LoadingOutlined, SearchOutlined } from "@ant-design/icons"

import "./importCss.less"

interface IProps {
  isModalVisible: boolean, // 是否显示弹框
  setIsModalVisible: Function // 设置是否隐藏函数
  getChildParam: Function // 点击确认的 获取子组件参数
  requestAsync?: (...args: any[]) => Promise<any>, // 可传接口

}

// 搜索组员弹框  普通版本只显示人员列表
const groupMemberSearch = (props: IProps) => {
  console.log(1111, props)

  const [loading, setLoading] = useState<boolean>(false)
  const [checkArr, setCheckArr] = useState<[]>([])


  // 点击确认
  const handleOk = () => {
    // setIsModalVisible(false)
    props.getChildParam(checkArr)
    props.setIsModalVisible(false)
  }
  // 点击取消 
  const handleCancel = () => {
    props.setIsModalVisible(false)
  }

  const onChange = (e: any) => {
    console.log(`checked = ${e.target.checked}`)
  }


  // Checkbox.Group  选中事件
  const onChangeCheckbox = (e: any) => {
    console.log(e)
    if (e) {
      setCheckArr(e)
    }
  }


  return (
    <div className="groupMemberSearch-Wrap">

      <Modal wrapClassName="groupMemberSearch" closable={false} title="" centered width={348} visible={props.isModalVisible} onOk={handleOk} onCancel={handleCancel}>
        <div className="groupMemberSearch-top" >
          <Input style={{ height: "28px" }} placeholder="请输入姓名或科室" />
          <Button style={{ height: "28px", marginLeft: "10px" }} size="small" type="primary" icon={<SearchOutlined />}>
            搜索
          </Button>
        </div>
        <div className="groupMemberSearch-conten">

          <Checkbox.Group style={{ width: "100%" }} onChange={onChangeCheckbox} >

            <label>
              <div className="groupMemberSearch-itemWrap">
                <div className="groupMemberSearch-itemLeft">
                  <div><img className="img" src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1802047654,2148216876&fm=26&gp=0.jpg" /></div>
                  <div className="groupMemberSearch-spanWrap">
                    <div> <span className="groupMemberSearch-span1" >凤美芳</span> <span className="groupMemberSearch-span2" >皮肤科</span> </div>
                    <div className="groupMemberSearch-span3" >东莞厚街人民医院</div>
                  </div>
                </div>
                <div>
                  <Checkbox value="4545" />
                </div>
              </div>
            </label>

            <label>
              <div className="groupMemberSearch-itemWrap">
                <div className="groupMemberSearch-itemLeft">
                  <div><img className="img" src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1802047654,2148216876&fm=26&gp=0.jpg" /></div>
                  <div className="groupMemberSearch-spanWrap">
                    <div> <span className="groupMemberSearch-span1" >凤美芳</span> <span className="groupMemberSearch-span2" >皮肤科</span> </div>
                    <div className="groupMemberSearch-span3" >东莞厚街人民医院</div>
                  </div>
                </div>
                <div>
                  <Checkbox value="3545" />
                </div>
              </div>
            </label>


            <label>
              <div className="groupMemberSearch-itemWrap">
                <div className="groupMemberSearch-itemLeft">
                  <div><img className="img" src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1802047654,2148216876&fm=26&gp=0.jpg" /></div>
                  <div className="groupMemberSearch-spanWrap">
                    <div> <span className="groupMemberSearch-span1" >凤美芳</span> <span className="groupMemberSearch-span2" >皮肤科</span> </div>
                    <div className="groupMemberSearch-span3" >东莞厚街人民医院</div>
                  </div>
                </div>
                <div>
                  <Checkbox value="3545" />
                </div>
              </div>
            </label>


            <label>
              <div className="groupMemberSearch-itemWrap">
                <div className="groupMemberSearch-itemLeft">
                  <div><img className="img" src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1802047654,2148216876&fm=26&gp=0.jpg" /></div>
                  <div className="groupMemberSearch-spanWrap">
                    <div> <span className="groupMemberSearch-span1" >凤美芳</span> <span className="groupMemberSearch-span2" >皮肤科</span> </div>
                    <div className="groupMemberSearch-span3" >东莞厚街人民医院</div>
                  </div>
                </div>
                <div>
                  <Checkbox value="3545" />
                </div>
              </div>
            </label>



            <label>
              <div className="groupMemberSearch-itemWrap">
                <div className="groupMemberSearch-itemLeft">
                  <div><img className="img" src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1802047654,2148216876&fm=26&gp=0.jpg" /></div>
                  <div className="groupMemberSearch-spanWrap">
                    <div> <span className="groupMemberSearch-span1" >凤美芳</span> <span className="groupMemberSearch-span2" >皮肤科</span> </div>
                    <div className="groupMemberSearch-span3" >东莞厚街人民医院</div>
                  </div>
                </div>
                <div>
                  <Checkbox value="3545" />
                </div>
              </div>
            </label>

          </Checkbox.Group>



        </div>
      </Modal>

    </div >
  )
}

export default groupMemberSearch
